<template>
	<div class="shop">
		<div class="shop-wrapper">
			<div class="shop-wrapper-header">
				<div class="header-area">
					<div class="header-area-left">
						<span>知了—知识产品与用户服务的私域运营工具</span>
					</div>
					<div class="header-area-right">
						<el-dropdown class="user-name" @command="handleCommand">
							<span class="el-dropdown-link">
								{{ username }}
								<i class="el-icon-caret-bottom"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
			<div class="choose-shop-wrapper">
				<div class="shop-list-wrapper">
					<div class="shop-wrapper">
						<div class="shop-list-title">我的店铺({{shopcount}})</div>
						<div class="shop-list">
							<!-- <div class="shop-list-item" v-for="(item,index) in shopdata" :key="index"> -->
							<div @click="createShop" class="shop-list-item create_shop"><span
									class="add-shop-symbol">+</span>创建店铺</div>
							<div class="shop-list-item" v-for="(item,index) in shopdata" :key="index">
								<div class="top-change top-change-gray-try"></div>
								<div class="shop-item-content">
									<a class="router-link-active">
										<div>
											<!-- <div class="shop-list__name" @click="setShopuuid(item.shopuuid,item.domainname,item.exptime,item.shopname)"> -->
											<div class="shop-list__name">
												{{item.shopname}}</div>
											<div class="lowser" style="color: black"><span
													@click="setShopuuid(item.shopuuid,item.domainname,item.exptime,item.shopname)">{{item.username}}</span>
												<el-link :underline="false" @click="copyToClipBoard(item.domainurl)">
													复制店铺链接</el-link>
											</div>
											<!-- <el-link :href="item.domainurl" :underline="false" type="primary"
												style="margin-top:20px">{{item.domainurl}}</el-link> -->

										</div>
										<qriously  :value="item.domainurl" :size="100" class="shop-img"/>
										<!-- <img :src="imgSrc[index]" class="shop-img" /> -->
									</a>
									<div class="beta-time">
										<!-- <div>{{item.day}}天使用</div> -->
										
										<div class="shop-list__time">有效期至：{{item.exptime|formatDate}} </div>
									</div>
									
									<div class="beta-time">
										<!-- <button style="width: 400px;border: 1px dashed #999;">进入店铺</button> -->
										<button id="entry_button" style="width: 400px;border: 0px;"  @click="setShopuuid(item.shopuuid,item.domainname,item.exptime,item.shopname)">进入店铺</button>
									</div>
									<!-- <div style="margin-top:5px;color:red;font-size:12px" v-if="item.wxapp==0"  @click="setShopuuidpz(item.shopuuid,item.domainname,item.exptime,item.shopname)">请先配置公众号再查看店铺效果(点击配置)</div> -->
								</div>
							</div>
							<!-- <div @click="createShop" class="shop-list-item create_shop"><span
									class="add-shop-symbol">+</span>创建店铺</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 创建店铺弹框 -->
		<el-dialog title="创建店铺" :visible.sync="createShopDialogVisible" width="50%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
				<el-form-item label="店铺名称" :label-width="formLabelWidth" prop="shopname">
					<el-input v-model="ruleForm.shopname" placeholder="请输入店铺名称" maxlength="20" width="200px"></el-input>
					<el-link :underline="false" type="primary" style="text-align: right">（你的店铺名字，请不要输入特殊字符）</el-link>
				</el-form-item>
				<el-form-item label="店铺域名" :label-width="formLabelWidth" prop="domainname">
					<el-input v-model="ruleForm.domainname" placeholder="请输入店铺域名" maxlength="20" width="200px"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g,'')">
					</el-input>
					<el-link :underline="false" type="primary">（为你的店铺访问地址取名，必须是英文或英文加数字）</el-link>
				</el-form-item>
				<el-form-item label="店铺访问地址" :label-width="formLabelWidth" prop="domain">
					<el-tag style="font-size: 14px;" type="success" v-show="ruleForm.domainname?true:false"
						v-text="domain+ruleForm.domainname">
					</el-tag>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm('ruleForm')">创 建</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Cookies from 'js-cookie';
	import {
		createShopData,
		getShopData,
		getShopErWeiMa,
		shopurl,
		storageShopuuid,
	} from '../../api/index';
	export default {
		filters: {
			formatDate(date) {
				return date.toString().substr(0, 10);
			},
			// formatDate2(date){
			// 	const nDate=new Date(date);
			// 	const year=nDate.getFullYear();
			// 	const month=(nDate.getMonth()+1).toString().padStart(2,0);
			// 	const day=nDate.getDay().toString().padStart(2,0);
			// 	return year+'-'+month+'-'+day;
			// }
		},
		data() {
			var checkshopname = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入店铺名称'));
				} else if (value.length < 1 || value.length > 20) {
					return callback(new Error('长度在 1 到 20 个字符'));
				} else if (checkSpecial(value)) {
					return callback(new Error('不能输入特殊字符'));
				}
				this.ruleForm.flag = 'testshopname';
				createShopData(this.ruleForm).then((res) => {
					//console.log(res.msg);
					if (res.code == -1) {
						return callback(new Error('店铺名称已经被取了，请换一个'));
					} else if (res.code == -2) {
						return callback(new Error('长度在 1 到 20 个字符'));
					} else if (res.code == 1) {
						if (this.tip) {
							this.$message({
								message: '恭喜你，这个店铺名称可以取',
								type: 'success'
							});
						}
						callback();
					}
				});
			};
			var checkdomainname = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入店铺域名'));
				} else if (!checkLength(value, 0, 21)) {
					return callback(new Error('长度在 1 到 20 个字符'));
				} else if (checkCN(value)) {
					return callback(new Error('不能是中文'));
				} else if (checkSpecial(value)) {
					return callback(new Error('不能输入特殊字符'));
				} else if (!checkEN(value)) {
					return callback(new Error('必须是字母和数字'));
				} else if (!checkEs(value)) {
					return callback(new Error('必须英文字母开头'));
				} else if (checkSpace(value)) {
					return callback(new Error('不能有空格字符'));
				}
				this.ruleForm.flag = 'testdomainname';
				createShopData(this.ruleForm).then((res) => {
					if (res.code == -1) {
						return callback(new Error('店铺域名已经被取了，请换一个'));
					} else if (res.code == -2) {
						return callback(new Error('长度在 1 到 20 个字符'));
					} else if (res.code == 1) {
						if (this.tip) {
							this.$message({
								message: '恭喜你，这个店铺域名可以取',
								type: 'success'
							});
						}
						callback();
					}
				});
			};
			return {
				createShopDialogVisible: false,
				domain: shopurl,
				ruleForm: {
					shopname: '',
					domainname: '',
					flag: 'testshopname', //测试店铺标记
				},
				tip: true, //控制是否弹出提示框
				rules: {
					shopname: [{
						required: true,
						//message: '请输入店铺名称',
						validator: checkshopname,
						trigger: 'blur'
					}],
					domainname: [{
						required: true,
						validator: checkdomainname,
						trigger: 'blur'
					}],
					domain: [{
						required: false,
					}]
				},
				formLabelWidth: '120px',
				shopdata: '',
				imgSrc:[],
				shopcount: 0
			};
		},
		computed: {
			username() {
				let username = localStorage.getItem('ms_username');
				return username;
			}
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {
				getShopData({username:this.username}).then((res) => {
					console.log(res);
					if (res.code == 1) {
						this.shopdata = res.data;
						this.shopcount = res.data.length;
						// for(let i = 0; i < this.shopdata.length; i++) { //后台版本获取二维码
						// 	this.getErWeiMa(this.shopdata[i].domainurl);
						// }
					} else if (res.code == -1) {
						console.log(res);
						this.$alert('非法操作', '消息提示', {
							confirmButtonText: '确定'
						});
						this.$router.push('/login');
					}
				});
			},
			// 用户名下拉菜单选择事件
			handleCommand(command) {
				if (command == 'loginout') {
					localStorage.removeItem('ms_username');
					Cookies.remove('refreshtoken');
					Cookies.remove('token');
					this.$router.push('/login');
				}
			},
			createShop() {
				this.tip = true;
				this.createShopDialogVisible = true;
			},
			submitForm(formName) {
				this.tip = false;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.ruleForm.flag = 'submit';
						createShopData(this.ruleForm).then((res) => {
							if (res.code == 1) {
								this.$alert('恭喜你！创建店铺成功', '消息提示', {
									confirmButtonText: '确定',
									callback: action => {
										this.createShopDialogVisible = false;
										this.getData();
									}
								});
							} else {
								this.$alert('出错了，创建店铺失败', '消息提示', {
									confirmButtonText: '取消',
								});
							}
						});
					} else {
						//console.log('error submit!!');
						this.tip = true;
						this.$alert('出错了，创建店铺失败', '消息提示', {
							confirmButtonText: '取消',
						});
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			copyToClipBoard($str) {
				copyToClipBoard($str);
				this.$alert("复制成功，请粘贴到你的微信上推荐给你的好友", '消息');
			},
			async setShopuuid(shopuuid,domainname,time,shopname) {
				localStorage.setItem('shop_username',shopname);
				localStorage.setItem('shopuuid', shopuuid);//存储uuid方便以后使用
				localStorage.setItem('domainname',domainname);
				let res=await storageShopuuid({shopuuid,sss:1});
				//console.log(res);
				this.$router.push('index');
			},
			async setShopuuidpz(shopuuid,domainname,time,shopname) {
				localStorage.setItem('shop_username',shopname);
				localStorage.setItem('shopuuid', shopuuid);//存储uuid方便以后使用
				localStorage.setItem('domainname',domainname);
				let res=await storageShopuuid({shopuuid,sss:1});
				//console.log(res);
				this.$router.push('setshop');
			},
			// getErWeiMa(url){ //后台版本获取二维码
			//    getShopErWeiMa({url}).then((res)=>{
			// 	   //console.log(res);
			// 		this.imgSrc.push(base64show(res));
			// 	})	
			// }
		},

	};
</script>


<style>
	#app {
		overflow: auto !important;
	}

	.shop-wrapper {
		background-color: #fafafa;
		height: 100%;
	}

	.shop-wrapper-header {
		position: fixed;
		top: 0;
		width: 100%;
		height: 60px;
		background-color: #fff;
		line-height: 28px;
		border-bottom: 1px solid #eee;
	}

	.header-area {
		margin: 0 auto;
		width: 1200px;
		line-height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-area-left,
	.header-area-right {
		display: flex;
		align-items: center;
	}

	.el-dropdown-link {
		cursor: pointer;
	}

	/* 我的店铺 */
	.choose-shop-wrapper {
		margin: 0 auto;
		width: 1200px;
		margin-top: 100px;
	}

	.shop-list-title {
		display: flex;
		align-items: center;
		padding-top: 16px;
		margin-bottom: 24px;
		color: #353535;
		font-weight: bold;
		font-size: 24px;
		font-family: PingFangSC-Medium, PingFang SC;
	}

	.shop-list {
		display: flex;
		flex-wrap: wrap;
	}

	.shop-list-item {
		margin-right: 1%;
		margin-bottom: 32px;
		display: block;
		position: relative;
		width: 32%;
		box-sizing: border-box;
		transition: all ease 0.2s;
		background: #fff;
		box-shadow: 2px 5px 20px 0px rgb(0 0 0 / 8%);
		border-radius: 8px;
		cursor: pointer;
	}

	.shop-list-item:hover {
		box-shadow: 2px 5px 20px 0px #dbdbdb;
		transform: translateY(-8px);
	}
	
	.shop-list-item :hover #entry_button{
		/* box-shadow: 2px 5px 20px 0px #dbdbdb;
		transform: translateY(-18px); */
		/* border: 1px dashed #999; */
		background-color: #fff;
		color: blue;
	}

	.shop-list-item .top-change {
		width: 100%;
		height: 8px;
		background: #ebebeb;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.shop-item-content {
		padding: 24px;
	}

	.shop-item-content a {
		display: flex;
		justify-content: space-between;
	}

	.shop-list__name {
		display: flex;
		align-items: center;
		margin-bottom: 14px;
		text-align: left;
		color: #353535;
		font-size: 20px;
		font-weight: bold;
		font-family: PingFangSC-Medium, PingFang SC;
		width: 270px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.lowser {
		font-size: 16px;
		display: flex;
		flex-flow: wrap;
		align-items: center;
	}

	.lowser span {
		padding: 2px 8px;
		border-radius: 4px;
		border: 1px solid #dbdbdb;
		margin-right: 8px;
		/* color: #333; */
		display: inline-block;
		max-width: 200px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.lowser .el-link .el-link--inner {
		color: #38B03F;
		border: none !important;
	}

	.shop-img {
		position: absolute;
		right: 35px;
		width: 85px;
		height: 85px;
		display: block;
		/* border-radius: 50%; */
	}

	.beta-time {
		display: flex;
		font-size: 14px;
		color: #999;
		justify-content: space-between;
		padding-top: 12px;
	}

	.create_shop {
		/* margin-right: 0px !important; */
		padding: 0;
		line-height: 200px;
		border: 2px dashed #1472ff;
		text-align: center;
		font-size: 16px;
		color: #1472ff;
		box-shadow: none;
	}

	.add-shop-symbol {
		position: relative;
		top: 2px;
		margin-right: 10px;
		font-size: 24px;
	}

	.shop .el-input__inner {
		width: 200px !important;
	}

	.shop .el-input {
		width: auto;
	}
</style>
